<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style>
        * {
            padding: 0;
            margin: 0;
        }
        
        .top-banner {
            background-color: pink;
            height: 80px;
        }
        
        .w {
            width: 120px;
            margin: 10px auto;
            position: relative;
        }
        
        img {
            display: block;
            width: 1210px;
            height: 80px;
            background-color: blue;
        }
        
        a {
            position: absolute;
            top: 5px;
            right: 5px;
            color: #fff;
            background-color: #000;
            text-decoration: none;
            width: 20px;
            height: 20px;
            font: 700 14px/20px "simsum";
            text-align: center;
        }
        
        .hide {
            display: none !important;
        }
    </style>
</head>

<body>
    <div class="top-banner" id="topBanner">
        <div class="w">
            <img src="#" alt="" />
            <a href="#" id="closeBanner">x</a>
        </div>
    </div>
    <script type="text/javascript">
        //需求：点击案例，隐藏盒子。
        //思路：点击a链接，让top-banner这个盒子隐藏起来（加隐藏类名）。

        //1.获取事件源和相关元素
        var closeBanner = document.getElementById("closeBanner");
        var topBanner = document.getElementById("topBanner");
        //2.绑定事件
        closeBanner.onclick = function() {
            //3.书写事件驱动程序
            //类控制
            //        topBanner.className += " hide"; //保留原类名，添加新类名
            topBanner.className = "hide"; //替换旧类名（方式一）
            //        topBanner.style.display = "none"; //方式二：与上一行代码的效果相同
        }
    </script>
</body>

</html>